<script lang="ts" setup>
import {computed, inject, nextTick} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import useRouteStore from '@/store/route.ts'
import useThemeStore from '@/store/theme.ts'

const refreshCurrentPage: any = inject('refresh')
const route = useRoute()
const router = useRouter()
const routeStore = useRouteStore()
const themeStore = useThemeStore()
const tabsMenuList = computed(() => routeStore.tabsMenuList)
const refresh = () => {
	routeStore.removeKeepAliveName(route.name as string)
	refreshCurrentPage(false)
	void nextTick(() => {
		routeStore.addKeepAliveName(route.name as string)
		refreshCurrentPage(true)
	})
}

const maximize = () => {
	themeStore.setFullScreen(true)
}

const closeCurrentTab = () => {
	if (route.meta.isAffix) return
	routeStore.removeTabs(route.fullPath)
	routeStore.removeKeepAliveName(route.name as string)
	if (!tabsMenuList.value.length) {
		addTabs()
	}
}

const closeOtherTab = () => {
	routeStore.closeMultipleTab(route.fullPath)
	routeStore.setKeepAliveName([route.name] as string[])
}

const getChildren = (arr: Array<any>) => {
	if (arr[0].children && arr[0].children.length) {
		return getChildren(arr[0].children)
	}
	return arr[0]
}

const closeAllTab = () => {
	routeStore.setTabs([])
	routeStore.setKeepAliveName([])
	router.push({path: '/'})
	let redirectPath = getChildren(routeStore.getMenuList).path
	if (redirectPath === route.path) {
		const tabsParams = {
			icon: route.meta.icon as string,
			title: route.meta.title as string,
			path: route.fullPath.split('?')[0],
			params: route.fullPath.split('?')[1] || '',
			name: route.name as string,
			close: !route.meta.isAffix
		}
		routeStore.setTabs([tabsParams])
	}
}

const addTabs = () => {
	if (route.meta.isFull) return
	const tabsParams = {
		icon: route.meta.icon as string,
		title: route.meta.title as string,
		path: route.fullPath,
		name: route.name as string,
		close: !route.meta.isAffix
	}
	routeStore.addTabs(tabsParams)
	route.meta.noCache && routeStore.addKeepAliveName(route.name as string)
}
</script>

<template>
	<el-dropdown trigger="click">
		<div class="click-icon">
			<el-icon>
				<ArrowDownBold/>
			</el-icon>
		</div>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item @click="refresh">
					<el-icon>
						<Refresh/>
					</el-icon>
					刷新
				</el-dropdown-item>
				<el-dropdown-item @click="maximize">
					<el-icon>
						<FullScreen/>
					</el-icon>
					最大化
				</el-dropdown-item>
				<el-dropdown-item divided @click="closeCurrentTab">
					<el-icon>
						<Remove/>
					</el-icon>
					关闭当前
				</el-dropdown-item>
				<el-dropdown-item @click="closeOtherTab">
					<el-icon>
						<CircleClose/>
					</el-icon>
					关闭其他
				</el-dropdown-item>
				<el-dropdown-item @click="closeAllTab">
					<el-icon>
						<FolderDelete/>
					</el-icon>
					关闭所有
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
